<template>
  <WithDialog
    :visible.sync="visible"
    title="创建会议室"
    :before-close="handleBeforeClose"
    @cancel="handleCancel"
    @confirm="handleConfirm"
  >
    <Form
      v-if="visible"
      ref="formRef"
      :model="formData"
    />
  </WithDialog>
</template>
<script>
import WithDialog from '@/components/WithDialog/withDialog.vue'
import Form from './Form.vue'
export default {
  name: '',
  components: {
    WithDialog,
    Form
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '',
        quantity: 1,
        notes: '',
        state: 1,
        address: ''
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    handleCancel() {
      this.handleClose()
    },

    async handleConfirm() {
      const flag = await this.$refs.formRef.validate()
      if (flag) {
        this.$emit('onConfirm', { ...this.formData })
        this.handleClose()
      } else {
        this.$message.error('请将信息填写完整')
      }
    },

    handleClose() {
      this.reset()
      this.$emit('input', false)
    },

    reset() {
      this.formData = this.$options.data().formData
      this.$refs.formRef.resetFields()
    },

    handleBeforeClose() {
      this.handleClose()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
